<route lang="json5" type="page">
{
  layout: 'main',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '支持',
  },
}
</route>

<template>
  <view class="support-collapse">
    <wd-collapse v-model="activeNames">
      <wd-collapse-item title="如何创建账号" name="1">
        <view class="content-text">
          您可以通过点击首页的“注册”按钮来创建新账号。填写相关信息并按照页面指引完成注册。
        </view>
      </wd-collapse-item>
      <wd-collapse-item title="如何重置密码" name="2">
        <view class="content-text">
          如果您忘记了密码，可以在登录页面选择“忘记密码”并按照指引来重置您的密码。
        </view>
      </wd-collapse-item>
      <wd-collapse-item title="联系客服" name="3">
        <view class="content-text">
          如需进一步的帮助，请通过我们的官方邮箱example@support.com与我们联系，我们的客服团队将在24小时内回复您。
        </view>
      </wd-collapse-item>
    </wd-collapse>
    <wd-button type="primary" block round @click="contactSupport">联系客服</wd-button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref(['1']) // 默认打开第一项

// 处理“联系客服”按钮点击
const contactSupport = () => {
  // 这里可以加入打开邮箱应用、复制客服邮箱地址、转至在线客服聊天窗口等逻辑
  console.log('用户尝试联系客服')
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.support-collapse {
  .wd-collapse {
    margin-bottom: 20px;
  }

  .content-text {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
  }

  .wd-button {
    margin: 20px;
  }
}
</style>
